<template>
    <div v-if="showContent" id="app">
        <keep-alive>
            <router-view v-if="alive"></router-view>
        </keep-alive>
        <router-view v-if="!alive"></router-view>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            //全局报警相关函数
            Socket: null,
            wsUrl: this.$wssUrl,
            showContent:false,
            timer: null,
            tokenTimer: null
        }
    },
    computed: {
        alive() {
            return this.$route.meta.keepAlive
        }
    },

    watch: {
        //to是当前路径，from是上一路径
        $route(to,from){
        	var that=this;
        	if(['Login','findPwd','register'].indexOf(to.name)<0){
        	    if(this.allAlarmSocket){
        			return
        		}
            setTimeout(function(){
        		  that.wsUrl=that.$wssUrl;
              that.getAllAlarm();
            },1000)
        	}else{
        		if(this.allAlarmSocket){
        			this.allAlarmSocket.close();
        			clearInterval(that.allAlarmTimer);
        		}
        	}
        }
    },

    created() { },
    mounted() {
        var that=this;
        setTimeout(function(){
           that.showContent = true;
        },1000)
        //监听用户是否访问后打开收藏栏，以刷新页面重新适配
        //但是缩小还原窗口也会引起刷新，体验不好，暂时弃用；
        // window.addEventListener("resize", () => {
        // 	if (window.innerHeight == window.screen.availHeight - 71 || window.innerHeight == window.screen.availHeight - 103) {
        //           window.location.reload();
        // 	}
        // })
    },

    methods: {
        //实时报警全局函数；
        //以下是设备监控相关函数
        getAllAlarm() {
            var that = this;
            this.allAlarmSocket = new WebSocket(this.wsUrl);
            if (this.allAlarmSocket.readyState != WebSocket.OPEN) {
                this.allAlarmSocket.onopen = function () {
                    var pingData = {
                        action: "alarm",
                        data: {
                            user_id: localStorage.getItem('at_userId'),
                            token: localStorage.getItem("attoken")
                        }
                    };
                    that.allAlarmSocket.send(JSON.stringify(pingData));
                    that.allAlarmTimer = setInterval(function () {
                        that.allAlarmSocket.send(JSON.stringify(pingData));
                    }, 30000);
                    console.log('连接成功')
                };
            };
            this.allAlarmSocket.onerror = this.onError;
            this.allAlarmSocket.onmessage = this.onMessage;
        },

        onError(e) {
            var that = this;
            //console.log("连接失败，尝试重连")
            this.allAlarmSocket.close();
            clearInterval(that.allAlarmTimer);
            //this.getALLAlarm();
        },

        isObject(obj) {
            return obj.constructor.toString().indexOf("Object") > -1;
        },
        onMessage(msg) {
            var that = this;
            var messageData = JSON.parse(msg.data);
            //console.log(messageData);
            if (messageData.result == "success" && this.isObject(messageData.data)) {
                var liveDatas = messageData.data;
                var url = "../../static/alarmVoice.mp3";
                // var url = "../../static/ykAlarm.mp3";
                var voice = new Audio();
                voice.src = url;
                voice.muted = localStorage.getItem("muted") == 'true' ? true : false;
                if (!voice.muted) {
                    voice.play();
                } else {
                    voice.pause();
                }
                if (liveDatas.status == 'alarm') {  //报警
                    this.$notify({
                        title: "报警提示:",
                        //type:'error',
                        customClass: 'alarmNotice',
                        iconClass: 'el-icon-warning',
                        dangerouslyUseHTMLString: true,
                        message: '<div style="display:block;text-align:left;max-height:260px;width:220px;overflow:auto;cursor:pointer;line-height:20px;margin:0 auto;padding-right:10px;text-indent:0;padding-left:0;position:relative;z-index:3;">设备:<span style="color:red;">' +
                            liveDatas.equip_name + '</span></br>项目:' + liveDatas.product_name + '</br>内容:' + liveDatas.content + '</br><span style="display:block;color:deepskyblue;">点击开启/关闭语音</span></div>',
                        duration: 5000,
                        onClose: function () {
                            voice.pause();
                        },
                        onClick: function () {
                            voice.muted = !voice.muted;
                            localStorage.getItem("muted", voice.muted);
                            if (voice.muted) {
                                voice.pause();
                            } else {
                                voice.play();
                            }
                        },
                        offset: 100
                    })
                } else if (liveDatas.status == 'connect' || liveDatas.status == 'online') {
                    this.$notify({
                        title: "恢复提示:",
                        type: "success",
                        dangerouslyUseHTMLString: true,
                        message: '<div style="display:block;text-align:left;max-height:260px;width:220px;overflow:auto;cursor:pointer;line-height:20px;margin:0 auto;padding-right:10px;text-indent:0;padding-left:0;position:relative;z-index:3;">设备:<span style="color:green;">' +
                            liveDatas.equip_name + '</span></br>项目:' + liveDatas.product_name + '</br>内容:' + liveDatas.content + '</br><span style="display:block;color:deepskyblue;">点击开启/关闭语音</span></div>',
                        duration: 5000,
                        onClose: function () {
                            voice.pause();
                        },
                        onClick: function () {
                            voice.muted = !voice.muted;
                            localStorage.getItem("muted", voice.muted);
                            if (voice.muted) {
                                voice.pause();
                            } else {
                                voice.play();
                            }
                        },
                        offset: 100
                    })
                } else if (liveDatas.status == 'disconnect' || liveDatas.status == 'powerdown') {
                    this.$notify({
                        title: "离线提示:",
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: '<div style="display:block;text-align:left;max-height:260px;width:220px;overflow:auto;cursor:pointer;line-height:20px;margin:0 auto;padding-right:10px;text-indent:0;padding-left:0;position:relative;z-index:3;">设备:<span style="color:#f56c6c;">' +
                            liveDatas.equip_name + '</span></br>项目:' + liveDatas.product_name + '</br>内容:' + liveDatas.content + '</br><span style="display:block;color:deepskyblue;">点击开启/关闭语音</span></div>',
                        duration: 5000,
                        onClose: function () {
                            voice.pause();
                        },
                        onClick: function () {
                            voice.muted = !voice.muted;
                            localStorage.getItem("muted", voice.muted);
                            if (voice.muted) {
                                voice.pause();
                            } else {
                                voice.play();
                            }
                        },
                        offset: 100
                    })
                }
            } else {
                console.log(messageData.message);
            }
        }
    },
    beforeDestroy() {
        var that = this;
        localStorage.removeItem("deviceData");
        clearInterval(that.allAlarmTimer);
        if (this.allAlarmSocket) {
            this.allAlarmSocket.close();
            this.allAlarmSocket = null;
        }

    },
    destroyed() {
    }

}
</script>

<style>
#app {
    /* font-family: "PingFang SC",'Avenir', Helvetica, Arial, sans-serif; */
    /* font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; */
    font-family: "微软雅黑", Arial, "Hiragino Sans GB", sans-serif, "PingFang SC", "Helvetica Neue", Helvetica;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-align: center;
    color: #2c3e50;
    /* margin-top: 60px; */

}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #F5F5F5;
}


/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    /*滚动条的颜色*/
    background-color: #00BFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
    text-decoration: none;
}

@media all and (max-width:1600px) {
    #goback {
        height: 0.8rem;
        line-height: 0.8rem;
        width: 1.6rem;
        padding: 0;
    }

    input {
        height: 0.8rem !important;
        line-height: 0.8rem !important;
    }

    * /deep/ .el-input__inner,
    .inpu /deep/ .el-input__inner,
    .inpu_2 /deep/ .el-input__inner,
    .inpu_3 /deep/ .el-input__inner,
    .inpu_4 /deep/ .el-input__inner,
    .inpu_5 /deep/ .el-input__inner {
        height: 0.8rem !important;
        line-height: 0.8rem !important;
        padding: 0 2px;
        font-size: 0.3rem !important;
        padding-right: 0 !important;
    }

    input::-webkit-input-placeholder {
        font-size: 10px !important;
    }
}

@media all and (max-width:1366px) {
    .header_bottom {
        margin-bottom: 0.2rem !important;
    }

}

a {
    color: white;
}

@keyframes alarm {
    0% {
        color: red;
        text-shadow: 0 0 10px red;
    }

    50% {
        color: deepskyblue;
        text-shadow: 0 0 10px deepskyblue;
    }

    100% {
        color: green;
        text-shadow: 0 0 10px green;
    }
}

@keyframes alarm2 {
    0% {
        color: white;
        text-shadow: 0 0 10px white;
    }

    100% {
        color: blue;
        text-shadow: 0 0 10px blue;
    }
}

input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

input[type="date"] {
    border-radius: 4px;
    /* outline: none; */
    border: 1px solid #ddd;
    padding-left: 10px;
    padding-right: 8px;
    font-size: 0.25rem;
    /* margin-bottom:10px; */
}

input[type="date"]::-webkit-clear-button {
    display: inline-block;
    transform: translateX(-6px);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: white;
}


.sele {
    display: inline-block;
    width: 4rem;
    height: 0.54rem;
    line-height: 0.54rem;
    border-radius: 4px;
    padding-left: 0.2rem !important;
    margin-bottom: 0.4rem;
}

.inpu {
    width: 4rem;
}

.page {
    height: auto;
    width: 100%;
    z-index: 1;
    overflow: visible;
    margin: 0;
    padding: 0;
    background-color: white;
    /* background-image:url(assets/timg.gif); */
    /* background-position: left top; */
    /* */
    background-size: 100% 100%;
}

.dialog-footer {
    text-align: left;
    margin-top: 0.4rem;
    margin-left: 0.6rem;
    /* text-indent:1rem; */
}

.dlog {
    box-sizing: border-box;
    padding: 0 !important;
    position: relative;
}

.toptit {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    background-color: #eee;
    position: absolute;
    text-align: left;
    top: 0;
    left: 0;
    padding: 0 0.2rem !important;
    border-radius:8px 8px 0 0;
}

.toptit span:last-child{
   width:auto;
   position: absolute;
   right:0.2rem;
   z-index:999;
   cursor:pointer;
}

.pagination {
    width: 99.4%;
    display: flex;
    background-color: white;
    justify-content: space-around;
    margin: 0 auto;
    margin-top: 0.2rem;
    height: 1rem;
    align-items: center;
    line-height: 1rem;
}

.headerTop {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.3rem;
    text-align: left;
    margin-top: 0.2rem;
    /* border:1px solid red; */
}

.header_bottom {
    height: 0.8rem ;
    line-height: 0;
    text-align: left;
    margin: 0.2rem 0 2px 0;
    /* border:1px solid red; */
}

.pagebtn {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0.2rem;
}

.over {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.over_x {
    overflow-x: hidden;
    overflow-y: visible;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.top {
    width: 99.4% !important;
    padding-right: 0.4rem;
    height: 1rem;
    box-sizing: border-box;
    font-size: 0.3rem;
    line-height: 1rem;
    border-bottom: 1px solid #ccc;
}

.bottom_top {
    margin: 0.2rem 0;
    width: 99%;
    height: 1rem;
    line-height: 1rem;
    padding-right: 0.2rem;
    background-color: #ccc;
}

.cardActive {
    color: #fff;
    background-color: #0e6db0;
}

.mar {
    -ms-transform: translateX(0.2rem) !important;
    -webkit-transform: translateX(0.2rem) !important;
    transform: translateX(0.2rem) !important;
}

.mar_2 {
    -ms-transform: translateX(0.3rem) !important;
    -webkit-transform: translateX(0.3rem) !important;
    transform: translateX(0.3rem) !important;
}

/* .mar_l{
	  -ms-transform: translateX(-0.1rem)!important;
	  -webkit-transform: translateX(-0.1rem)!important;
	  transform: translateX(-0.1rem)!important;
	} */

.mar_l_2 {
    -ms-transform: translateX(0.5rem) !important;
    -webkit-transform: translateX(0.5rem) !important;
    transform: translateX(0.5rem) !important;
}

.mar_l_3 {
    -ms-transform: translateX(0.4rem) !important;
    -webkit-transform: translateX(0.4rem) !important;
    transform: translateX(0.4rem) !important;
}

.mar_l_4 {
    margin-left: -0.4rem !important;
}

.goback {
    color: #999;
    cursor: pointer;
}

.goback:hover {
    font-weight: 700;
    color: #111;
}

.inp {
    width: 15%;
    margin-right: 0.4rem;
    height: 0.7rem;
    line-height: 0.7rem;
    border-radius: 0.4rem 0 0 0.4rem !important;
    font-size: 0.25rem;
    color: #999 !important;
    border: none;
    padding-left: 0.3rem;
    outline: none;
}

.no,
.no_grey,
.stopUse,
.yes {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    margin-left: 0.1rem !important;
}

/* .no {
         background: radial-gradient(circle, white 5%, red);
    }

    .yes {
        background: radial-gradient(circle, white 5%, green);
    } */

.no {
    background: url(../static/no.png) no-repeat;
    background-size: 100% 100%;
}

.yes {
    background: url(../static/yes.png) no-repeat;
    background-size: 100% 100%;
}

.no_grey {
    background: url(../static/grey.png) no-repeat;
    background-size: 100% 100%;
    /* background: radial-gradient(circle, #ccc 2%, #666); */
}

.stopUse {
    background: url(../static/stopUse.png) no-repeat;
    background-size: 100% 100%;
    /* background: radial-gradient(circle, #ccc 2%, #666); */
}

.onlineState,
.offlineState {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-top: -2px;
    margin-left: 0.1rem !important;
    vertical-align: middle;
    /* box-shadow: 0px 0px 8px  green; */
}

.onlineState {
    background: url(../static/onlineState.png) no-repeat;
    background-size: 100% 100%;
}

.offlineState {
    background: url(../static/offlineState.png) no-repeat;
    background-size: 100% 100%;
}

.bt_outer {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    padding: 0;
    box-sizing: content-box !important;
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    -ms-transform: translate(0.1rem, 0.14rem);
    -webkit-transform: translate(0.1rem, 0.14rem);
    transform: translate(0.1rem, 0.14rem);
    border: 3px solid #ccc;
}

.bt_inner_on,
.bt_inner_off {
    display: block;
    box-sizing: border-box !important;
    width: 0.45rem;
    height: 0.45rem;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: radial-gradient(circle, white 5%, green);
    /* background-color: green; */
}

.bt_inner_off {
    background: radial-gradient(circle, white 5%, red);
    /* background-color:red; */
}

.alarm_on {
    -ms-transform: translate(0.05rem, 0.14rem);
    -webkit-transform: translate(0.05rem, 0.14rem);
    transform: translate(0.05rem, 0.14rem);
    color: #ff3300;
    font-size: 0.6rem;
    -ms-animation: alarm 500ms linear 100ms infinite;
    -webkit-animation: alarm 500ms linear 100ms infinite;
    animation: alarm 500ms linear 100ms infinite;
}

.alarm_off {
    -ms-transform: translate(0.05rem, 0.14rem);
    -webkit-transform: translate(0.05rem, 0.14rem);
    transform: translate(0.05rem, 0.14rem);
    color: #ccc;
    font-size: 0.6rem;
}

.sendbox {
    max-width: 2.2rem;
    height: 0.8rem;
    line-height: 0.8rem;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    cursor: pointer;
}

.sendnum {
    display: inline-block;
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
}

.send {
    display: inline-block;
    min-width: 1.8rem;
    height: 0.8rem;
    font-size: 16px;
    text-align: center;
    line-height: 0.8rem;
    vertical-align: top;
    background-color: #666;
    /* background-color:#f2f2f2; */
}

.send:hover {
    background-color: #666;
}

.able {
    color: limegreen;
}

.noable {
    color: #ccc;
}

.clear:after {
    /* 正常浏览器 清除浮动 */
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.sensorHead span {
    display: inline-block;
    font-size: 0.34rem;
}

.sensorHead .sortIcon {
    width: 0.3rem !important;
    height: 0.3rem;
    font-size: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    color: red;
    background-color: #ccc;
}

.sensorHead .sortIcon {
    margin-left: 1px;
}

.sortIcon i {
    font-size: 0.3rem;
}

.container_table>>>.el-table--small td {
    padding: 4px 0;
}

.container_table>>>.el-table--mini td {
    padding: 2px 0;
}

.shareSup {
    /* display: inline-block; */
    color: white;
    width: 0.7rem;
    text-align: center;
    background-color: deepskyblue;
    font-size: 0.25rem;
    /* border-radius: 2px; */
    height: 0.45rem;
    line-height: 0.45rem;
    /* padding-bottom: 1px; */
    position: absolute;
    right: 2px;
    top: 2px;
}

.leftName {
    position: absolute;
    top: -1px;
    left: -1px;
    width: auto;
    padding: 0 0.1rem;
    display: inline-block;
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.3rem;
    background-color: #222831;
    /*#22567b*/
    color: #fff;
}
</style>
